<script setup lang="ts">
import SearchTable from '../../../components/Table/SearchTable.vue'
import AllTable from '../../../components/Table/AllTable.vue';
import { OperationTable } from '../../../api/Table/index'
import { onMounted, ref } from 'vue'
interface User {
    stuNo: Number,
    stuName: String,
    image: String,
    bourn: String,
    switch: Boolean,
    expertiseName: Number
}

const NameData = ['检测人员姓名', '检测区域', '检测环境', '用水检测']
const TableName = [
    {
        title: 'ID',
        text: 'stuNo'
    },
    {
        title: '设备维修人员',
        text: 'stuName'
    },
    {
        title: '实时监测图',
        text: 'image'
    },
    {
        title: '场地使用',
        text: 'bourn'
    },
    {
        title: '设备监测',
        text: 'switch'
    },
    {
        title: '实时用电',
        text: 'expertiseName'
    }
]

const tableData: any = ref([])

const getTable = async () => {
    let res = await OperationTable()
    tableData.value = res.data.data.result[0].list
    console.log(tableData);
}

onMounted(() => {
    getTable()
})

const handleEdit = (index: number, row: User) => {
    console.log(index, row)
}
const handleDelete = (index: number, row: User) => {
    console.log(index, row)
}
</script>

<template>
    <div style="margin-bottom: 20px">
        <el-button type="primary">新增检测人员</el-button>
        <el-button type="primary">批量删除</el-button>
    </div>
    <SearchTable :NameData="NameData" />
    <AllTable :tableData="tableData" :handleEdit="handleEdit" :handleDelete="handleDelete"
        :TableName="TableName" />
</template>

<style scoped lang="scss">
#components-form-demo-advanced-search .ant-form {
    max-width: none;
}

#components-form-demo-advanced-search .search-result-list {
    margin-top: 16px;
    border: 1px dashed #e9e9e9;
    border-radius: 2px;
    background-color: #fafafa;
    min-height: 200px;
    text-align: center;
    padding-top: 80px;
}

[data-theme='dark'] .ant-advanced-search-form {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid #434343;
    padding: 24px;
    border-radius: 2px;
}

[data-theme='dark'] #components-form-demo-advanced-search .search-result-list {
    border: 1px dashed #434343;
    background: rgba(255, 255, 255, 0.04);
}
</style>